<template>
	<view>
		<view class="pyg_user">
			<!-- 个人信息开始 -->
			<view class="user_profile">
				<block v-if="userInfo.nickName">
					<!-- 图片背景开始 -->
					<view class="user_profile_bg">
						<image :src="userInfo.avatarUrl"></image>
					</view>
					<!-- 图片背景结束 -->
					<!-- 个人图片开始 -->
					<view class="image_wrapper">
						<image :src="userInfo.avatarUrl"></image>
					</view>
					<!-- 个人图片结束 -->
					<!-- 个人昵称开始 -->
					<view class="user_nickname">{{userInfo.nickName}}</view>
					<!-- 个人昵称结束 -->
				</block>
				<block v-else>
					<button class="userinfo_button" type="warn" plain @click="handleGetUserInfo">
						登录
					</button>
				</block>

			</view>
			<!-- 个人信息结束 -->
			<!-- 订单功能区开始 -->
			<view class="order_func">
				<navigator url="/pages/order/order?type=2" class="order_to_pay">
					<view class="iconfont icon-icon-test"></view>
					<view class="text">代收款</view>
				</navigator>
				<navigator url="/pages/order/order?type=3" class="order_to_recieve">
					<view class="iconfont icon-daishouhuo"></view>
					<view class="text">待收货</view>
				</navigator>
				<navigator url="/pages/order/order?type=1" class="order_to_drawback">
					<view class="iconfont icon-tuikuan"></view>
					<view class="text">退货/退款</view>
				</navigator>
				<navigator url="/pages/order/order?type=1" class="order_all">
					<view class="iconfont icon-quanbudingdan"></view>
					<view class="text">全部订单</view>
				</navigator>

			</view>
			<!-- 订单功能区结束 -->
			<!-- 系统功能列表开始 -->
			<view class="system_func">
				<view class="func_list_item">
					<view class="left">
						<text class="iconfont icon-lianxikefu"></text>
						<text class="text">联系客服</text>
					</view>
					<view class="right">
						400-618-4000
					</view>
				</view>
				<!-- 意见反馈开始 -->
				<navigator url="/page/feedback/feedback" class="func_list_item">
					<view class="left">
						<text class="iconfont icon-yijianfankui"></text>
						<text class="text">意见反馈</text>
					</view>
				</navigator>
				<!-- 意见反馈结束 -->
				<!-- 当前版本开始 -->
				<view class="func_list_item">
					<view class="left">
						<text class="iconfont icon-ziyuan"></text>
						<text class="text">当前版本</text>
					</view>
					<view class="right">
						v4.1.1
					</view>
				</view>
				<!-- 当前版本结束 -->
			</view>
			<!-- 系统功能列表结束 -->

		</view>
	</view>
</template>

<script>
	export default {
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			//从storage里面获取用户的信息
			let userInfo = uni.getStorageSync("userInfo") || {};
			this.userInfo = userInfo;
		},
		data() {
			return {
				userInfo: {} //用户信息
			}
		},
		methods: {
			//获取用户信息
			handleGetUserInfo: function() {
				
				uni.getUserProfile({
					desc: "获取用户的个人信息",
					success: (e) => {
						console.log(e);
						//2. 存到 storage中 页面初始化的时候 可以获取
						// debugger
						this.userInfo = e.userInfo;
						uni.setStorageSync("userInfo", e.userInfo);
					}
				})

			},
		}
	}
</script>

<style>
	.pyg_user {
		background-color: #f9f9f9;
		height: 100vh;
		/* 系统功能区 */
	}

	.pyg_user .user_profile {
		height: 329rpx;
		width: 750rpx;
		background-color: white;
		position: relative;
	}

	.pyg_user .user_profile .user_profile_bg {
		height: 329rpx;
		filter: blur(28rpx);
	}

	.pyg_user .user_profile .user_profile_bg image {
		height: 100%;
		width: 100%;
	}

	.pyg_user .user_profile .image_wrapper {
		position: absolute;
		left: 289rpx;
		top: 32rpx;
	}

	.pyg_user .user_profile .image_wrapper image {
		border-radius: 50%;
		height: 172rpx;
		width: 172rpx;
	}

	.pyg_user .user_profile .user_nickname {
		width: 100vw;
		position: absolute;
		text-align: center;
		top: 220rpx;
		font-size: 32rpx;
		color: white;
	}

	.pyg_user .user_profile .userinfo_button {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 20%;
		width: 500rpx;
	}

	.pyg_user .order_func {
		height: 144rpx;
		margin: 20rpx 12rpx;
		width: calc(100vw - 24rpx);
		display: flex;
		align-items: center;
		background-color: white;
	}

	.pyg_user .order_func .order_to_pay {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pyg_user .order_func .order_to_pay .iconfont.icon-icon-test {
		font-size: 50rpx;
	}

	.pyg_user .order_func .order_to_pay .text {
		font-size: 26rpx;
	}

	.pyg_user .order_func .order_to_recieve {
		flex: 1;
		text-align: center;
	}

	.pyg_user .order_func .order_to_recieve .iconfont.icon-daishouhuo {
		font-size: 50rpx;
	}

	.pyg_user .order_func .order_to_recieve .text {
		font-size: 26rpx;
	}

	.pyg_user .order_func .order_to_drawback {
		flex: 1;
		text-align: center;
	}

	.pyg_user .order_func .order_to_drawback .iconfont.icon-tuikuan {
		font-size: 50rpx;
	}

	.pyg_user .order_func .order_to_drawback .text {
		font-size: 26rpx;
	}

	.pyg_user .order_func .order_all {
		flex: 1;
		text-align: center;
	}

	.pyg_user .order_func .order_all .iconfont.icon-quanbudingdan {
		font-size: 50rpx;
	}

	.pyg_user .order_func .order_all .text {
		font-size: 26rpx;
	}

	.pyg_user .system_func {
		height: 520rpx;
		margin: 0 12rpx;
		width: calc(100vw - 24rpx);
		background-color: white;
	}

	.pyg_user .system_func .func_list_item {
		height: 101rpx;
		width: 726rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #c8c8c8;
		color: #434343;
	}

	.pyg_user .system_func .func_list_item .left {
		display: flex;
		align-items: center;
	}

	.pyg_user .system_func .func_list_item .left .iconfont {
		margin: 0 28rpx 0 40rpx;
		font-size: 45rpx;
	}

	.pyg_user .system_func .func_list_item .left text.text {
		font-size: 26rpx;
	}

	.pyg_user .system_func .func_list_item .right {
		font-size: 26rpx;
		margin-right: 46rpx;
	}
</style>
